<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="柱状图" name="first">
        <div id="ichart" :style="{ width: '100%', height: '400px' }"></div>
      </el-tab-pane>
      <el-tab-pane label="饼状图" name="second">
        <div id="myChart" :style="{ width: '100%', height: '400px' }"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 引入 ECharts 主模块

var echarts = require("echarts/lib/echarts");

// 引入柱状图

require("echarts/lib/chart/bar");

// 引入提示框和标题组件

require("echarts/lib/component/tooltip");

require("echarts/lib/component/title");

export default {
  data() {
    return {
      activeName: "first",
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        series: [
          {
            name: "访问来源",

            type: "pie",

            radius: "55%",

            itemStyle: {
              normal: {
                // 阴影的大小

                shadowBlur: 200,

                // 阴影水平方向上的偏移

                shadowOffsetX: 0,

                // 阴影垂直方向上的偏移

                shadowOffsetY: 0,

                // 阴影颜色

                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },

            data: [
              { value: 400, name: "搜索引擎" },

              { value: 335, name: "直接访问" },

              { value: 310, name: "邮件营销" },

              { value: 274, name: "联盟广告" },

              { value: 235, name: "视频广告" },
            ],
          },
        ],
      });
      let zhuchart = echarts.init(document.getElementById("ichart"));
       zhuchart.setOption(
           {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
           }
       );
      
    },
  },
};
</script>
<style lang="less" scoped>
</style>